<template>

  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <a-row :gutter="24">
      <a-col :span="24">
        <a-button type="primary" style="width: 100%" @click="addTask">添加工序</a-button>
      </a-col>
    </a-row>

    <div class="list">
      <van-list
        :finished="finished"
        finished-text="没有更多了"
      >
        <div
          class="customer-list"
          v-for="(item,i) in dataSource"
          :key="i">
          <div>
            <div class="contact">
              <span>任务名称：{{ item.itemName || '无' }}</span>
              <span style="margin-left: 20px;">任务阶段：{{ getDictValue('gh_customer_info_decoration_stage',item.itemStage) }}</span>
            </div>
            <div class="contact">
              <span>开工时间：{{ item.startWorkTime }}</span>
              <span style="margin-left: 20px;">工期：{{ item.workTimeLimit }}</span>
            </div>
            <div class="contact">
              <span>任务描述：{{ item.itemRemark || '无' }}</span>
              <span style="float: right;font-size: 20px;font-weight: bold">
                  <a @click.stop="changeShowMenu(item)"><a-icon type="more" /></a>
                </span>
            </div>
            <div class="contact">
              <span>负责人：{{ getDictValue('construction_mould_item_person_in_charge',item.personInCharge) }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <van-action-sheet
      v-model="showMenu"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="selectMenu"
    />
    <gan-te-tu-modal ref="ganTeTuModal" @ok="modalOk()"></gan-te-tu-modal>
  </a-drawer>

</template>

<script>
  import constructionDetail from "./constructionDetail";
  import {getAction,deleteAction} from "../../../../../api/manage";
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'
  import ganTeTuModal from "./ganTeTuModal";

  export default {
    name: "constructionMouldItem",
    mixins: [JeecgListMixin, mixinDevice],
    components:{
      constructionDetail,ganTeTuModal
    },
    data() {
      return {
        title:'',
        width:'100%',
        visible: false,
        disableSubmit: false,
        fullscreen: true,
        switchFullscreen: true,
        currentMouldId: 0,
        url: {
          list: "/ghConstructionMouldItem/list",
          add: "/ghConstructionMouldItem/add",
          edit: "/ghConstructionMouldItem/edit",
          delete: "/ghConstructionMouldItem/delete"
        },
        dataSource: [],
        columns:[],
        model:{},
        finished: false,
        loading: false,
        actions: [
          {name: '编辑',click: 'updateTask'},
          {name: '删除',click: 'deleteMouldItem'},

        ],
        showMenu: false,
        currentObj:{},
      }
    },
    created() {

    },
    methods: {
      close () {
        this.$emit('close');
        this.visible = false;
        this.showMenu = false
      },
      handleCancel () {
        this.close()
      },

      loadData(arg) {
        if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, {id: this.currentMouldId}).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      showDrawer(){
        this.title = "工序详情";
        this.visible = true;
      },
      getDictValue(code,value){
        if (value != null){
          return filterDictTextByCache(code,value)
        }else {
          return "无"
        }
      },
      changeShowMenu(item){
        this.showMenu = true;
        this.currentObj = item;
      },
      selectMenu(selectItem){
        this[selectItem.click](this.currentObj);
      },
      addTask(){
        this.$refs.ganTeTuModal.title = "添加工序";
        this.$refs.ganTeTuModal.add(this.currentMouldId);
      },
      updateTask(item){
        this.$refs.ganTeTuModal.title = "编辑工序";
        this.$refs.ganTeTuModal.edit(item);
      },
      deleteMouldItem(item){
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        let that = this;
        that.loading = true;
        this.$confirm({
          title: "确认删除",
          content: "是否删除数据?",
          onOk: function () {
            that.loading = true;
            deleteAction(that.url.delete, {id: item.id}).then((res) => {
              if (res.success) {
                //重新计算分页问题
                that.$message.success(res.message);
                that.loadData(1);
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              this.loading = false
            });
          }
        });
      },
      modalOk(){
        this.loadData(1);
      }
    },
  }
</script>

<style scoped lang="less">
  @import '~@assets/less/common.less';
  .select-pk{
    display:flex;
    align-items:center;
    margin:10px 0;
    &>span{
      font-weight: bold;
    }
    &-text{
      width: calc(100% - 6em);
      height: 30px;
      text-indent: 1em;
      line-height: 28px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }
  }
  .list{
    overflow-y: scroll;
    height:100vh;
    margin-top: 10px;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list{
    /*display: flex;*/
    align-items: center;
    border-top: 1px solid #d9d9d9;
    .name{
      font-size: 13px;
      color: #161616;
      line-height: normal;
      margin-top: 5px;
    }
    .contact{
      margin-top: 5px;
      font-size: 12px;
      color: #a39f9f;
      margin-bottom: 5px;
    }
  }
</style>